<template lang="html">
    <div class="swiper">
      <mt-swipe :auto="4000" @change="handleChange">
        <mt-swipe-item v-for="i in this.slide" :key="i.id">
           <img :src="i">
        </mt-swipe-item>
      </mt-swipe>
    </div>

</template>

<script>
export default {
  props: ['slide'],
  data(){
    return{
      current_page: 1,
    }
  },
  computed:{
    swiper(){
        return this.$store.state.detail.productDatas.swiper
    },
    total_page(){
      return this.swiper ? this.swiper.length : 0
    }
  },
  mounted(){

  },
  methods: {
    handleChange(index){
      this.current_page = this.current_page - index + 1
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../assets/fz.less';
@import '../../assets/index/style.css';

.swiper {
  width: 100%;
  position: relative;

  .mint-swipe {
    width: 100%;
    height:100vw;
    img {
      display: block;
      width: 100%;
      height:100%;
    }
  }

  // .back {
  //   width: 7vw;
  //   height: 7vw;
  //   position: absolute;
  //   left: 4vw;
  //   top: 2vw;
  //   background-color: rgba(0,0,0,.4);
  //   border-radius: 50%;
  //   text-align: center;
  //     span {
  //       display: inline-block;
  //       line-height: 7vw;
  //       .fz(font-size,40);
  //       transform: rotate(-180deg);
  //       &::before {
  //         color:#fff;
  //       }
  //     }

  //     &:active {
  //       transform: scale(1.3);
  //     }
  // }

  .page{
    width: 9.33vw;
    position: absolute;
    right: 2.67vw;
    bottom: 2.67vw;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    font-size: 3.2vw;
    color: #fff;
    height: 9.33vw;
    text-align: center;
    line-height: 9.33vw;
    font-family: 'PingFang-SC-Regular';
  }

}
</style>
